import React from "react";

import { View, Text, TextInput, Image, TouchableOpacity } from "react-native";

import dismissKeyboard from "dismissKeyboard";

import Config from "../../config";
import BasePage from "../common/BasePage";
import Constants from "../../common/Constants";
import SizeUtils from "../../common/SizeUtils";
import ToastUtils from "../../common/ToastUtils";
import CommonStyles from "../../common/CommonStyles";
import ResponseConstants from "../../common/ResponseConstants";

import UserUpdatePhoneAction from "../../actions/user/UserUpdatePhoneAction";
import RequestSmsAction from "../../actions/login/RequestSmsAction";

export default class UserPhonePage extends BasePage {
  constructor(props) {
    super(props);

    this.state.smsIntervalTick = 0;
    this.state.viewStatus = 1;
    this.state.prePhone = "";
    this.state.phone = "";
    this.state.password = "";
    this.state.smsNum = "";
    this.state.statusText = "";
    this.state.authorization = "0";
    this.state.smsIntervalTick = -1;
    this.state.updateSucess = false;
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (nextState.updateSucess === true) {
      nextState.updateSucess = false;
      ToastUtils.show("修改成功");
      nextState.password = "";
      nextState.prePhone="";
      nextState.phone="";
      nextState.smsNum = "";
      nextState.viewStatus = 1;
      this.goBack();
    }
    if (nextState.updateFaile === true) {
      nextState.updateFaile = false;
      ToastUtils.show(nextState.FaileText);
    }
    if (this.state.viewStatus != nextState.viewStatus) {
      if (nextState.viewStatus == ResponseConstants.status_sms_success) {
        this.smsInterval = setInterval(this._updateInterval.bind(this), 1000);
        this._updateInterval();
      }
    }
    return true;
  }

  _dealLeavePage() {
    this._clearInterval();
  }

  _updateInterval() {
    var tick =
      this.state.smsIntervalTick == -1 ? 60 : this.state.smsIntervalTick - 1;
    if (tick == 0) {
      this._clearInterval();
      tick = -1;
    }
    this.setState({
      smsIntervalTick: tick
    });
  }

  _clearInterval() {
    if (this.smsInterval) {
      clearInterval(this.smsInterval);
      this.smsInterval = null;
      this.setState({
        smsIntervalTick: -1
      });
    }
  }

  render() {
    return (
      <TouchableOpacity
        style={{
          flex: 1,
          paddingTop: Config.paddingTop,
          backgroundColor: "#ffffffff",
          paddingLeft: SizeUtils.translateDesignWidthToCode(28),
          paddingRight: SizeUtils.translateDesignWidthToCode(28),
          flexDirection: "column",
          alignItems: "center"
        }}
        onPress={() => dismissKeyboard()}
      >
        {this._renderprePhoneText()}
        {this._renderPasswordText()}
        {this._renderNewPhoneText()}
        {this._renderSmsText()}
        <View style={{ flex: 1 }} />
        {this._renderSubmitButton()}
        {this._renderNavigationBar()}
      </TouchableOpacity>
    );
  }

  _renderprePhoneText() {
    return (
      <View
        style={{
          height: SizeUtils.translateDesignHeightToCode(86),
          borderBottomWidth: SizeUtils.translateFontSizeToCode(3),
          borderColor: "#eeeeee",
          flexDirection: "row",
          alignItems: "center"
        }}
      >
        <Text
          style={{
            fontSize: SizeUtils.translateFontSizeToCode(28),
            color: "#000",
            textAlignVertical: "center",
            textAlign: "center"
          }}
        >
          原手机号 :{" "}
        </Text>
        <TextInput
          style={{
            height: SizeUtils.translateDesignHeightToCode(86),
            textAlignVertical: "center",
            flex: 1,
            fontSize: SizeUtils.translateFontSizeToCode(32)
          }}
          onChangeText={prePhone => this.setState({ prePhone })}
          placeholder=""
          underlineColorAndroid="transparent"
          multiline={false}
          maxLength={16}
          value={this.state.prePhone}
        />
      </View>
    );
  }

  _renderNewPhoneText() {
    return (
      <View
        style={{
          height: SizeUtils.translateDesignHeightToCode(86),
          borderBottomWidth: SizeUtils.translateFontSizeToCode(3),
          borderColor: "#eeeeee",
          flexDirection: "row",
          alignItems: "center"
        }}
      >
        <Text
          style={{
            fontSize: SizeUtils.translateFontSizeToCode(28),
            color: "#000",
            textAlignVertical: "center",
            textAlign: "center"
          }}
        >
          新手机号 :{" "}
        </Text>
        <TextInput
          style={{
            height: SizeUtils.translateDesignHeightToCode(86),
            textAlignVertical: "center",
            flex: 1,
            fontSize: SizeUtils.translateFontSizeToCode(32)
          }}
          onChangeText={phone => this.setState({ phone })}
          placeholder=""
          underlineColorAndroid="transparent"
          multiline={false}
          maxLength={16}
          value={this.state.phone}
        />
      </View>
    );
  }

  _renderPasswordText() {
    return (
      <View
        style={{
          height: SizeUtils.translateDesignHeightToCode(86),
          borderBottomWidth: SizeUtils.translateFontSizeToCode(3),
          borderColor: "#eeeeee",
          flexDirection: "row",
          alignItems: "center"
        }}
      >
        <Text
          style={{
            fontSize: SizeUtils.translateFontSizeToCode(28),
            color: "#000",
            textAlignVertical: "center",
            textAlign: "center"
          }}
        >
          登录密码 :{" "}
        </Text>
        <TextInput
          style={{
            height: SizeUtils.translateDesignHeightToCode(86),
            textAlignVertical: "center",
            flex: 1,
            fontSize: SizeUtils.translateFontSizeToCode(32)
          }}
          onChangeText={password => this.setState({ password })}
          placeholder=""
          secureTextEntry={true}
          underlineColorAndroid="transparent"
          multiline={false}
          maxLength={16}
          value={this.state.password}
        />
      </View>
    );
  }

  _renderSmsText() {
    return (
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          height: SizeUtils.translateDesignHeightToCode(86),
          borderBottomWidth: SizeUtils.translateFontSizeToCode(3),
          borderColor: "#eeeeee"
        }}
      >
        <Text
          style={{
            fontSize: SizeUtils.translateFontSizeToCode(28),
            color: "#000",
            textAlignVertical: "center",
            textAlign: "center"
          }}
        >
          验证码 :{" "}
        </Text>
        <TextInput
          style={{
            height: SizeUtils.translateDesignHeightToCode(86),
            textAlignVertical: "center",
            flex: 1,
            fontSize: SizeUtils.translateFontSizeToCode(28)
          }}
          onChangeText={smsNum => this.setState({ smsNum })}
          placeholder=""
          multiline={false}
          underlineColorAndroid="transparent"
          maxLength={6}
          keyboardType="numeric"
          keyboardAppearance="dark"
          value={this.state.smsNum}
        />
        <TouchableOpacity
          onPress={() => this._onRequestSms()}
          style={{
            width: SizeUtils.translateDesignWidthToCode(250),
            height: SizeUtils.translateDesignHeightToCode(86),
            flexDirection: "row",
            justifyContent: "flex-end",
            alignItems: "center"
          }}
          disabled={this.state.smsIntervalTick > 0}
        >
          <View
            style={{
              padding: SizeUtils.translateDesignNumToCode(10),
              borderRadius: SizeUtils.translateDesignNumToCode(4),
              borderColor: "#ff6600",
              borderWidth: SizeUtils.translateDesignNumToCode(3)
            }}
          >
            <Text
              style={[
                CommonStyles.primaryText,
                {
                  fontSize: SizeUtils.translateFontSizeToCode(24),
                  color: "#ff6600"
                }
              ]}
            >
              {this._getSmsBtnText()}
            </Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }

  _getSmsBtnText() {
    var text = "获取验证码";
    if (this.state.smsIntervalTick > 0) {
      text = text + "(" + this.state.smsIntervalTick + ")";
    }
    return text;
  }

  _onRequestSms() {
     new RequestSmsAction().call(this, { type: 3 });
  }

  _renderSubmitButton() {
    return (
      <View
        style={{
          width:
            SizeUtils.getWindowSize().width -
            SizeUtils.translateDesignWidthToCode(28 * 2),
          flexDirection: "column",
          alignItems: "center",
          marginBottom: SizeUtils.translateDesignHeightToCode(30)
        }}
      >
        <TouchableOpacity
          disabled={this._checkBtnDisable()}
          onPress={() => this._onPressLoginBtn()}
          style={{
            width:
              SizeUtils.getWindowSize().width -
              SizeUtils.translateDesignWidthToCode(28 * 2),
            height: SizeUtils.translateDesignHeightToCode(72),
            borderRadius: 10,
            backgroundColor: "#EE3535",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <Text
            style={{
              color: "#ffffff",
              fontSize: SizeUtils.translateFontSizeToCode(28)
            }}
          >
            确认修改
          </Text>
        </TouchableOpacity>
        <Text
          style={{
            color: "#999999",
            fontSize: SizeUtils.translateFontSizeToCode(24),
            paddingTop: SizeUtils.translateDesignHeightToCode(20)
          }}
        >
          {this._renderSystemNotice()}
        </Text>
      </View>
    );
  }

  _checkBtnDisable() {
    return (
      this.state.password == "" ||
      this.state.smsNum == "" ||
      this.state.viewStatus == 2 ||
      this.state.viewStatus == 4
    );
  }

  _renderSystemNotice() {
    let statusText = "";
    let showCode = true;
    if (this.state.viewStatus == 1) {
      return "";
    } else if (this.state.viewStatus == 2) {
      statusText = "获取验证码中";
      showCode = false;
    } else if (this.state.viewStatus == ResponseConstants.status_sms_success) {
      statusText = "验证码已获取";
      showCode = false;
    } else if (this.state.viewStatus == 4) {
      statusText = "请求已发送";
      showCode = false;
    } else if (this.state.viewStatus == -901) {
      statusText = "密码格式不正确(6-16位)";
      showCode = false;
    } else if (
      this.state.viewStatus == ResponseConstants.status_password_length_error
    ) {
      statusText = ResponseConstants.status_password_length_error_text;
      showCode = false;
    } else {
      statusText = this.state.statusText;
    }
    if (showCode) {
      statusText = statusText + " code:" + this.state.viewStatus;
    }
    return statusText;
  }

  _onPressLoginBtn() {
    dismissKeyboard();
    if (!this.state.password || this.state.password.length < 6) {
      this.setState({
        viewStatus: ResponseConstants.status_password_length_error
      });
      return;
    }
    new UserUpdatePhoneAction().call(this, {
      mobile:this.state.prePhone,
      new_mobile:this.state.phone,
      password: this.state.password,
      smsNum: this.state.smsNum
    });
  }
}
